<%@page import="team.jmu.bean.TGoods"%>
<%@page import="java.text.DateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>集大杂货铺</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script	src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript" src="js/validator-login.js"></script>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<style>
.error {
	font-size: 10;
	color: black;
}
#showLogin{
	cursor: pointer;
}
#showLogin :hover{
	color: #ef3c3c;
}

#loginBg{
    position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(37,37,37,0.9);
	display: none;
	z-index: 3;
}
.loginDiv{
	width: 500px;
	height: 300px;
	background-color: white;
	position: absolute;
	top: calc(50% - 170px);
	left: calc(50% - 250px);
	border-radius: 6px;
    overflow: hidden;
}
.loginTitle{
	width: 500px;
	height: 50px;
	background-color: #7bec66;
	text-align: center;
	font-size: 20px;
	line-height: 50px;
	color: #daa220;
	font-weight: 600;
}
#LoginForm{
	width:100%;
	
}
.loginMain{
	margin: 30px 30px;
}
.loginMain input{
	border: 0px solid white;
	border-bottom: 2px solid #7bec66;
    margin-left: 8px;
    margin-bottom: 4px;
}
.loginMain label{
	color: #44a763;
	font-weight: 600;
}
.btn-home{
	float: right;
}
</style>
</head>

<body>
	<div id="loginBg">
		<div class="loginDiv">
			<div class="loginTitle">集大杂货铺</div>
			<form id="LoginForm" action="LoginServlet" method="post">
				<div class="loginMain">
					<div style="margin:4px auto;width:230px"><label >用户名:</label><input  type="text" id="username" name="username" /></div>
					<div style="margin:4px auto;width:230px"><label >密&nbsp &nbsp码:</label><input type="password" id="password" name="password" /></div>
					<div style="margin:4px auto;width:230px">
						<button class="btn-home" type="button" onclick="window.location.href='sign.jsp'">注册</button>
						<button class="btn-home" type="submit">登录</button>
						
					</div>
				</div>
			</form>
		</div>
	</div>
	<div id="gray"></div>
    <div class="popup" id="popup">
		<div class="top_nav" id='top_nav'>
			<div align="center">
				<span>登录账号</span>
				<a class="guanbi"></a>
			</div>
		</div>
		<div class="min">
			<div class="tc_login">
				<div class="left">
					<h4 align="center">手机扫描</h4>
					<div align="center"><img src="images/erweima.jpg" width="150" height="150" /></div>
					<dd>
						<div align="center">扫描二维码登录</div>
					</dd>
				</div>  
				<div class="right">
					<form method="POST" name="form_login"  action="LoginServlet" target="_top">
						<div align="center">
							<a href="">短信快捷登录</a>
							<i class="icon-mobile-phone"></i>
							<input type="text" name="username" id="name" required="required" placeholder="用户名" autocomplete="off" class="input_yh">
							<input type="password" name="password" id="pass" required="required" placeholder="密码" autocomplete="off" class="input_mm">
						</div>
						<dd>
							<div align="center"><a href="">遇到登录问题</a></div>
						</dd>
						<div align="center">
							<input type="submit" class="button" title="Sign In" value="登录">
						</div>
					</form>   
					<dd>
						<div align="center"><a href="sign.jsp" target="_blank">立即注册</a></div>
					</dd>
					<hr align="center" />
					<div align="center">期待更多功能 </div>
				</div>		
			</div>
		</div>
	</div>
	<header>
	<div class="nav">
		<c:if test="${lf==null}">
			<form id="LoginForm" action="LoginServlet" method="post">
				<label style="color:red;font-size:12px;" id="showLogin" class='tc'>欢迎光临集大杂货铺,请登录/注册</label>
				<a class="divhover" style="margin-left: 20px;" href="GetTenGoodsServlet">首页</a> 
				<a class="divhover" onclick="if(${empty lf}) alert('请先登录');" href="GetTenGoodsServlet">个人订单</a>
				<a class="divhover" onclick="if(${empty lf}) alert('请先登录');" href="GetTenGoodsServlet">购物车</a>
			</form>
		</c:if>
		
		<c:if test="${lf!=null}">
			<a>欢迎 , ${user.uname},您上次登录时间是${lastlogintime} </a>
			<a href="userinfo.jsp?uid=${user.uid}">修改信息</a>
			<a href="LogoutServlet?uid=${user.uid}">注销</a>
			<a href="GetTenGoodsServlet">首页</a>
			<a href="servlet/GetOrderList">个人订单</a>
			<a href="servlet/ShowShoppingcart">购物车</a>
		</c:if>
		<div id="time">
			<script>
				document.getElementById('time').innerHTML = new Date()
						.toLocaleString()
						+ ' 星期' + '日一二三四五六'.charAt(new Date().getDay());
				setInterval(
						"document.getElementById('time').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",
						1000);
			</script>
		</div>
	</div>
	</header>
	<div style="margin-top:40px" align="center" style="height: 100px">
		<img style="background-color:blue" src="image/battle.bmp">
	</div>
	<div style="margin-top:30px" align="center">
		<form action="GetGoodsByNameServlet" method="post">
			<div style="padding:5px 0;" align="center">
				<input style="width:300px;height:40px;text-indent: 1em;" type="text" name="gname"
					placeholder="请输入商品名称" autofocus="true" />
				<button class="search-button" type="submit">搜名称</button>
			</div>
		</form>
	</div>
	<div style="margin-top:40px">
		<a class="showtext">猜您喜欢</a>
	</div>

	<div style="margin:9px auto">
		<hr	style="border:0;height:2px;width:80%;margin:0 auto;background-color:lightblue;">
	</div>
	<div style="margin-top:-30px">
		<a class="ahover" style="margin-left:78%" href="GetTenGoodsServlet">换一批
			<img height="10px" width="10px" style="margin:1px 1px" src="image/timg1.jpg"/>
		</a> 
		<a class="ahover" style="margin-left:10px" href="GetGoodsByType?tid=1">杂货铺>></a>
	</div>
	<div class="box">
		<c:forEach items="${goods}" var="g">
			<div class="boxgoods">
				<div class="goods">
					<a href="GetGoodsInfo?gid=${g.gid}"><img src="${g.gphoto}" class="li_a_img"/></a><br /> 
					<a class="name1" href="GetGoodsInfo?gid=${g.gid}">${g.gname}</a>
					<p>￥${g.price}</p>
					<p>${g.note}</p>
				</div>
			</div>
		</c:forEach>
	</div>
	<hr
		style="height:1px;width:80%;margin:20px auto;background-color:#ff6a05;">
	<p align="center" style="color:#aaaaaa">© 2017 BaiTao.com 版权所有(伪)</p>
</body>
<script type="text/javascript">
	/*var showLogin=document.getElementById('showLogin');
	var loginBg=document.getElementById('loginBg');
	showLogin.onclick=function(){
		loginBg.style.display="block";
	}
	*/
	//窗口效果
	//点击登录class为tc 显示
	$(".tc").click(function(){
		$("#gray").show();
		$("#popup").show();//查找ID为popup的DIV show()显示#gray
		tc_center();
	});
	//点击关闭按钮
	$("a.guanbi").click(function(){
		$("#gray").hide();
		$("#popup").hide();//查找ID为popup的DIV hide()隐藏
	})

	//窗口水平居中
	$(window).resize(function(){
		tc_center();
	});

	function tc_center(){
		var _top=($(window).height()-$(".popup").height())/2;
		var _left=($(window).width()-$(".popup").width())/2;
		
		$(".popup").css({top:_top,left:_left});
	}	
	$(document).ready(function(){ 

		$(".top_nav").mousedown(function(e){ 
			$(this).css("cursor","move");//改变鼠标指针的形状 
			var offset = $(this).offset();//DIV在页面的位置 
			var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 
			var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离 
			$(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
			
				$(".popup").stop();//加上这个之后 
				
				var _x = ev.pageX - x;//获得X轴方向移动的值 
				var _y = ev.pageY - y;//获得Y轴方向移动的值 
			
				$(".popup").animate({left:_x+"px",top:_y+"px"},10); 
			}); 

		}); 

		$(document).mouseup(function() { 
			$(".popup").css("cursor","default"); 
			$(this).unbind("mousemove"); 
		});
	}) 
	
</script>
</html>
